iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

JavaScript 新手筆記系列 第 21

Day21 - 事件(02)

  • 分享至 

  • xImage
  •  

前言

繼續進行事件篇,今日介紹氣泡與捕捉,以及中止或取消的部分

事件監聽器

  • DOM 事件監聽器:element.addEventListener('event' , functionName , BooLean); 的第 3 個參數
    • false:由指定元素(內)往外擴散,所以稱為「事件氣泡( Event Bubbling )」,就像從 li > ul > body
    • true:由最外面往內至指定元素,所以稱為「事件捕捉( Event Capturing )」,就像從 body > ul > li
  • 參考以下例子,設定2個事件,按下按鈕時,因為參數設定不同,顯示順序會有所不同

index.html

<body id="body">
    
    <ul>
        <li><input type="button" value="按我" class="btn"></li>
        <li><a href="https://www.google.com/" class="link">點我連結到Google</a></li>
        <li></li>
    </ul>

    <script src="JS/test.js"></script>
</body>

test.js

var el1 = document.querySelector(".btn");
function click1(){
    console.log("我是內");
}

var el2 = document.querySelector("#body");
function click2(){
    console.log("我是外");
}

el1.addEventListener('click' , click1 , false);
el2.addEventListener('click' , click2 , false);

// 當2者為 false
// 氣泡,從內至外
// 顯示順序如下
// 我是內
// 我是外

el1.addEventListener('click' , click1 , true);
el2.addEventListener('click' , click2 , true);

// 當2者為 true
// 捕捉,從外至內
// 顯示順序如下
// 我是外
// 我是內

中止與取消

  • 中止氣泡或補捉: event.stopPropagation()
    • 不想要繼續執行其他層的內容
var el1 = document.querySelector(".btn");

function click1(e){
    console.log("我是內");
    e.stopPropagation();  // 中止
}
el1.addEventListener('click' , click1 , false);

var el2 = document.querySelector("#body");

function click2(){
    console.log("我是外");
}
el2.addEventListener('click' , click2 , false);

// 僅顯示指定元件,後續的並未執行
// 我是內
  • 取消預設的行為: event.preventDefault()
    • 一般常用在 linksubmit
var el3 = document.querySelector('.link');
function link(e){
    console.log("取消預設連結動作");
    e.preventDefault();  // 取消
}
el3.addEventListener('click' , link , false);

// 點擊後顯示 取消預設連結動作
// 並未連結至 google 頁面
  • 想把 function 的內容直接寫進去?
// function 內容寫在裡面
// 中止
var el1 = document.querySelector(".btn");

el1.addEventListener('click' , function(e){
    console.log("我是內");
    e.stopPropagation();  // 中止
} , false);


// function 內容寫在裡面
// 取消
var el3 = document.querySelector('.link');

el3.addEventListener('click' , function(e){
    console.log("取消預設連結動作");
    e.preventDefault();  // 取消
}, false);

次回

持續進行事件篇,感覺很慢


上一篇
Day20 - 事件(01)
下一篇
Day22 - 事件(03)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言